<section id="home" class="container">
  <app-breadcrumb></app-breadcrumb>

  <h1 class="home-title text-center" id="contentStart" tabindex="-1" translate>home.title</h1>

  <loading-indicator [loading]="!inited"></loading-indicator>

  <div class="alert alert-danger" *ngIf="loadError">
    {{ 'general.other-error' | translate }}
  </div>

  <div class="row" *ngIf="inited && !loadError">
    <div class="col-sm-12">
      <div class="text-center">
        <div class="row stats">
          <div class="col-sm-auto stat">
            <span class="numbers">{{ recordCounts.orgs | number }}</span>
            <span class="desc">{{ 'home.title-orgs' | translate }}</span>
          </div>
          <div class="col-sm-auto stat">
            <span class="numbers">{{ recordCounts.certs | number }}</span>
            <span class="desc">{{ 'home.title-certs' | translate }}</span>
          </div>
        </div>
        <div class="search-outer">
          <div class="search-inner">
            <div class="search-title mt-3">
              <h2 translate>search.title</h2>
            </div>
            <search-input
              #searchInput
              (accepted)="performSearch($event)"
              (inactiveChange)="setInactive($event)"
              (credTypeChange)="setCredType($event)"
              showInactive="true"
            ></search-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
